<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="../css/layui.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="../bootstrap/css/bootstrapValidator.min.css">
    <style>
        .pageHeader {
            border-bottom: 1px solid #eee;
            margin-bottom: 10px;
            position: relative;
        }

        .pageHeader .addButtonDiv {
            position: absolute;
            bottom: 5px;
            right: 40px;
        }
        aside.col-md-3 {
            padding-left: 0;
        }

        #treeMenu a {
            color: #333;
            text-decoration: none;
        }

        #treeMenu a:hover{color:#777;}

        section.col-md-9 {
            padding-left: 0;
        }


        .dataList table td
        ,.dataList table th{
            text-align: center;
        }

        td.operation a{
            text-decoration: none;
            margin-right: 5px;
        }
        .dataList .panel {
            margin-bottom: 0;
        }

        .pageBar {
            float: right;

        }
    </style>
</head>
<body>
<div class="container">
    <div class="row">
        <div class="pageHeader col-md-12">
            <h2>分类管理</h2>
            <div class="addButtonDiv dropdown">

                    <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
                        添加分类
                        <span class="caret"></span>
                    </button>
                    <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
                        <li class="addLevel"><a href="#">添加一级分类</a></li>
                        <li class="addLevel"><a href="#">添加二级分类</a></li>
                        <li class="addLevel"><a href="#">添加三级分类</a></li>

                    </ul>
                </div>

        </div>

        <aside class="col-md-3 treeMenu">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">产品分类</h3>
                </div>
                <!-- 树形tree分类-->
                <div class="panel-body">
                    <ul id="treeMenu"></ul>
                </div>
                <!-- 树形tree分类结束-->
            </div>
        </aside>
        <section class="col-md-9 dataList">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <h3 class="panel-title">产品列表</h3>
                </div>
                <div class="panel-body">
                    <table class="table table-bordered table-striped">
                        <thead>
                        <tr>
                            <th>编号</th>
                            <th>分类名称信息</th>
                            <th>分类级别</th>
                            <th>存档时间</th>

                            <th>备注</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>@mdo</td>
                            <td class="operation">
                                <a class="editCategory" href="javascript:"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                                <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>

                            </td>
                        </tr>
                        <tr>
                            <td>2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>@fat</td>
                            <td class="operation">
                                <a class="editCategory" href="javascript:"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                                <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>

                            </td>
                        </tr>
                        <tr>
                            <td>2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>@fat</td>
                            <td class="operation">
                                <a class="editCategory" href="javascript:"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                                <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>

                            </td>
                        </tr>
                        <tr>
                            <td>2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>@fat</td>
                            <td class="operation">
                                <a class="editCategory" href="javascript:"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                                <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>

                            </td>
                        </tr>
                        <tr>
                            <td>2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>@fat</td>
                            <td class="operation">
                                <a class="editCategory" href="javascript:"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                                <a class="deleteLink" href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>

                            </td>
                        </tr>
                        <tr>
                            <td>2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>@fat</td>
                            <td class="operation">
                                <a href="javascript:"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                                <a href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>

                            </td>
                        </tr>
                        <tr>
                            <td>2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>@fat</td>
                            <td class="operation">
                                <a href="javascript:"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                                <a href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>

                            </td>
                        </tr>
                        <tr>
                            <td>2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>@fat</td>
                            <td class="operation">
                                <a href="javascript:"><span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑</a>
                                <a href="javascript:"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span>删除</a>

                            </td>
                        </tr>


                        </tbody>
                    </table>
                </div>
            </div>

            <!--分页开始-->
            <div class="pageBar">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>



            <!-- 分页end-->


        </section>


        </div>




</div>



<!-- 添加模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="addClassModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title">添加分类,分类就是一级手机-二级华为-三级荣耀系列</h4>
            </div>
            <div class="modal-body">
                <!-- 表单开始-->
                <form class="form-horizontal" id="addcategoryForm">
                    <div class="form-group ">
                        <label for="goodsType" class="control-label col-md-2">所属分类</label>
                        <div class="col-md-4">
                            <select class="form-control" name="goodsLevel" id="goodsType">
                                <option value="">请选择所属类别</option>
                                <option value="">邓紫棋</option>
                                <option value="">林俊杰</option>
                                <option value="">谢安琪</option>


                            </select>
                        </div>
                        <span class="text-primary">如果下拉框不选，就是默认创建一个新类别</span>
                    </div>
                    <div class="form-group">
                        <label for="categoryName" class="col-md-2 control-label">类别名称</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="categoryName" placeholder="请输入类别名称" name="categoryName">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="remarks" class="col-md-2 control-label">备注</label>
                        <div class="col-md-8">
                            <textarea  class="form-control" rows="3" id="remarks" placeholder="可填可不填" name="categoryRemark"></textarea>
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                <button type="button" class="btn btn-primary" id="saveAdd">提交添加</button>
            </div>
        </div>
    </div>
</div>
<!-- 添加模态框结束 -->

<!-- 编辑模态框 -->
<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="editClassModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">

                <h4 class="modal-title">编辑分类</h4>
            </div>
            <div class="modal-body">
                <!-- 表单开始-->
                <form class="form-horizontal" id="editcategoryForm">
                    <div class="form-group ">
                        <label for="goodsType" class="control-label col-md-2">所属分类</label>
                        <div class="col-md-4">
                            <select class="form-control" name="goodsLevel" id="editGoodsType">

                                <option value="">邓紫棋</option>
                                <option value="">林俊杰</option>
                                <option value="">谢安琪</option>


                            </select>
                        </div>

                    </div>
                    <div class="form-group">
                        <label for="categoryName" class="col-md-2 control-label">当前类别</label>
                        <div class="col-md-8">
                            <input type="text" class="form-control" id="editCategoryName" placeholder="请输入类别名称" name="categoryName" value="睡公主">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="remarks" class="col-md-2 control-label">备注</label>
                        <div class="col-md-8">
                            <textarea  class="form-control" rows="3" id="editRemarks" placeholder="可填可不填" name="categoryRemark">她的歌真的好听！一股潇洒的感觉</textarea>
                        </div>
                    </div>


                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" >关闭</button>
                <button type="button" class="btn btn-primary" id="editSub">完成编辑</button>
            </div>
        </div>
    </div>
</div>
<!-- 编辑模态框结束 -->


<script src="../js/jquery-2.1.1.js"></script>
<script src="../layer/layer.js"></script>
<script src="../js/layui.js"></script>
<script src="../bootstrap/js/bootstrap.min.js"></script>
<script src="../bootstrap/js/bootstrapValidator.min.js"></script>

<script>
    layui.use('tree', function () {
        layui.tree({
            elem: '#treeMenu' //传入元素选择器
            ,nodes: [ //节点
                {
                    name: '女歌手'
                    ,id: 1

                    ,children: [
                    {
                        name: '邓紫棋'
                        ,id: 11

                        ,alias: 'weidu'
                    }, {
                        name: '孙燕姿'
                        ,id: 12
                    }
                ]
                }, {
                    name: '手机'
                    ,id: 2
                    ,spread: true
                    ,children: [
                        {
                            name: '华为'
                            ,id: 21
                            ,spread: true
                            ,children: [
                            {
                                name: '荣耀'
                                ,id: 211
                                ,children: [
                                {
                                    name: '荣耀V8'
                                    ,id: 2111
                                }, {
                                    name: '荣耀V9'
                                    ,id: 2112
                                }, {
                                    name: '荣耀V10'
                                    ,id: 2113
                                }
                            ]
                            }, {
                                name: 'HUAWEI Mate系列'
                                ,id: 212
                                ,children: [
                                    {
                                        name:'HUAWEI Mate10'
                                        ,id:19
                                    },
                                    {
                                        name:'HUAWEI Mate9'
                                        ,id:20
                                    }

                                ]
                            }
                        ]
                        }, {
                            name: '爱疯'
                            ,id: 22
                            ,children: [
                                {
                                    name: '爱疯4'
                                    ,id: 221
                                }, {
                                    name: '爱疯5'
                                    ,id: 222
                                }, {
                                    name: '爱疯X'
                                    ,id: 223
                                }
                            ]
                        }
                    ]
                },{
                    name: '和信广场'
                    ,id: 1

                    ,children: [
                        {
                            name: '奶冻奶茶'
                            ,id: 11

                            ,alias: 'weidu'
                        }, {
                            name: 'tnank you快餐'
                            ,id: 12
                        }
                    ]
                }
            ],click: function(node){
            console.log(node) //node即为当前点击的节点数据
        }
    });
    });

    //jq 函数开始
    $(function () {
        //检验加载
        formValidator();

        EditformValidator();

        deleteClickEvent();

        //模态框加载
        modalShow(".addLevel", "#addClassModal");

        modalShow(".editCategory", "#editClassModal");

        //"添加"按钮提交时
        subClickEvent("#saveAdd", "#addcategoryForm");

        //"编辑完成"，按钮提交时
        subClickEvent("#editSub", "#editcategoryForm");


        //当添加模态框隐藏时
        modalHidden('#addClassModal', "#addcategoryForm");

        //当编辑模态框隐藏时

        modalHidden('#editClassModal', "#editcategoryForm");

    });

    //添加表单校验规则，ajax 提交请看这里(～￣▽￣)～
    function formValidator() {
        $('#addcategoryForm').bootstrapValidator({
            message: '这个值是假的兄弟！',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                categoryName: {
                    message: '类别名称无效',
                    validators: {
                        notEmpty: {
                            message: '类别名称是必需的，不能是空的'
                        },
                        stringLength: {
                            min: 1,
                            max: 15,
                            message: '商品名称必须大于1，长度小于15个字符'
                        }
                    }
                },categoryRemark: {
                    message: '备注无效',
                    validators: {

                        stringLength: {
                            min: 0,
                            max: 50,
                            message: '备注不能超过50个字符'
                        }
                    }
                }

            }
        }).on('success.form.bv', function (e) {//这是当表单检验成功通过时的事件
            // Prevent form submission
            //阻止表单再次提交
            e.preventDefault();

            console.log("ok");
            //在这里做你想做的事情！！！！！！！

            //表单提交成功后，请清空表单内容
            // Get the form instance获取表单的的对象
            // var $form = $(e.target);

            // // Get the BootstrapValidator instance
            // var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data 这里提交到后台处理使用 ajax
            // $.post($form.attr('action'), $form.serialize(), function(result) {
            //      console.log(result);
            //  }, 'json');
        });
    }

    //编辑分类表单校验规则，ajax 提交请看这里(～￣▽￣)～
    function EditformValidator() {
        $('#editcategoryForm').bootstrapValidator({
            message: '这个值是假的兄弟！',
            feedbackIcons: {
                valid: 'glyphicon glyphicon-ok',
                invalid: 'glyphicon glyphicon-remove',
                validating: 'glyphicon glyphicon-refresh'
            },
            fields: {
                categoryName: {
                    message: '类别名称无效',
                    validators: {
                        notEmpty: {
                            message: '类别名称是必需的，不能是空的'
                        },
                        stringLength: {
                            min: 1,
                            max: 15,
                            message: '商品名称必须大于1，长度小于15个字符'
                        }
                    }
                },

                categoryRemark: {
                    message: '备注无效',
                    validators: {

                        stringLength: {
                            min: 0,
                            max: 50,
                            message: '备注不能超过50个字符'
                        }
                    }
                }

            }
        }).on('success.form.bv', function (e) {//这是当表单检验成功通过时的事件
            // Prevent form submission
            //阻止表单再次提交
            e.preventDefault();

            console.log("ok");
            //在这里做你想做的事情！！！！！！！

            //表单提交成功后，请清空表单内容
            // Get the form instance获取表单的的对象
            // var $form = $(e.target);

            // // Get the BootstrapValidator instance
            // var bv = $form.data('bootstrapValidator');

            // Use Ajax to submit form data 这里提交到后台处理使用 ajax
            // $.post($form.attr('action'), $form.serialize(), function(result) {
            //      console.log(result);
            //  }, 'json');
        });
    }



    //点击钮提交事件，手动执行校验表单
     function subClickEvent(buttonId,formId) {
        $(buttonId).on("click",function() {

            $(formId).bootstrapValidator('validate');
        })

    }

    //模态框加载
    function modalShow(buttonId,modalId) {  //这个buttonId，前面需要用#或.

        $(buttonId).on("click",function() {
     $(modalId).modal({show: true, backdrop: 'static', keyboard: false});
        });
    }

    //当模态框隐藏时
    function modalHidden(modalId,formId){
        $(modalId).on('hide.bs.modal', function (e) {
            //清空表单和校验样式
            $(formId).data('bootstrapValidator').resetForm(true);

            //请记住一定清空下拉框.因为是动态加载下拉框的，
//            $("#goodsType").empty();
        });
    }

    function deleteClickEvent() {
        $(".deleteLink").on("click",function() {
            var $this = $(this);
                       layer.confirm("确定要删除这条数据吗？",{btn: ['确定','不！']},
                    function() {
                        //点击确定的时候走这里
                        // 发送异步请求到后台删除数据
                        //$.get("UnPast.ashx", { id: $(this).attr("stuid") }
                        //拿到回调函数
                        $this.parent().parent().fadeOut("slow");

                        layer.msg('删除成功！', {icon: 1,time:900});
                    })

        })
    }

</script>
</body>
</html>